<template>
    <div class="footer-cp">
        <div class="container">
            <div class="left">
                <div class="column">
                    <div class="title">
                        更多
                    </div>
                    <div class="container">
                        <a 
                            class="item"
                            target="_blank" 
                            v-for="(item,index) in moreList" 
                            :key="index"
                            :href="item.href">
                            {{item.name}}
                        </a>
                    </div>
                </div>
                <div class="column">
                    <div class="title">
                        友情链接
                    </div>
                    <div class="container">
                        <a 
                            class="item"
                            target="_blank" 
                            v-for="(item,index) in friendlyLinkList" 
                            :key="index"
                            :href="item.url">
                            {{item.name}}
                        </a>
                    </div>
                </div>
                <div class="column">
                    <div class="content">
                        内容均来自网上，如有问题请联系站长及时删除。QQ：2978968560<br>
                        <a href="http://www.beian.miit.gov.cn/" target="_blank">蜀ICP备19040930号</a>
                        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010702001708">
                            川公网安备 51010702001708号
                        </a>
                        &nbsp;&nbsp;&nbsp;始于2019年12月的这次旅行，还未曾看到终点！
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="column">
                    <div class="title">
                        老大哥
                    </div>
                    <div class="container">
                        <a 
                            class="item"
                            target="_blank" 
                            v-for="(item,index) in childList" 
                            :key="index"
                            :href="item.href">
                            {{item.name}}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
//页脚组件
export default {
    name:"Footer",
    data(){ 
        return{
            friendlyLinkList:[
                {name:"一篇文字",url:"https://www.dumogu.top/"},
                {name:"站搜搜",url:"https://www.zhansousou.com/"},
                {name:"吴掌柜的博客",url:"https://www.dumogu.top/blog"},
                {name:"毒蘑菇搜索",url:"https://search.dumogu.top/"},
            ],
            moreList:[
                {
                    name:"站长微博",
                    href:"https://weibo.com/7438796191/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1",
                },
                {
                    name:"吐槽|留言",
                    href:"https://support.qq.com/product/289289",
                },
            ],
            childList:[
                {
                    name:"一篇文字",
                    href:"https://www.dumogu.top/",
                },
                {
                    name:"毒蘑菇搜索",
                    href:"https://search.dumogu.top/",
                },
                {
                    name:"数据管理",
                    href:"https://www.dumogu.top/admin",
                },
            ],
        }
    },
}
</script>
<style lang="scss" scoped>
.footer-cp{
    width: 100%;
    height: fit-content;
    background-color: #ffffff;
    padding: 15px;
    box-sizing: border-box;
    text-align: left;
    >.container{
        margin: 0 auto;
        max-width: var(--container-width);
        width: 100%;
        display: grid;
        grid-template-columns: 4fr 1fr;
        grid-gap: 15px;
        opacity: 0.6;
        transition: all 0.2s;
        &:hover{
            opacity: 1;
        }
        //栏目公共样式
        .column{
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 10px;
            >.title{
                line-height: 1;
                font-size: 16px;
                font-weight: bold;
            }
            >.container{
                display: flex;
                flex-direction: row;
                justify-content:flex-start;
                align-items: center;
                flex-wrap: wrap;
                >.item{
                    font-size: 14px;
                    margin: 5px 10px 5px 0;
                    line-height: 1;
                }
            }
            >.content{
                opacity: 0.8;
                font-size: 14px;
                line-height: 2;
                span{
                    font-weight: bold;
                    font-size: 15px;
                }
            }
        }
        >.left{
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 15px;
            height: fit-content;
        }
        >.right{
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 15px;
            height: fit-content;
        }
    }
}

@media only screen and (max-width: 750px) {
    .footer-cp{
        display: none;
    }
}
</style>